<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>新年手机端</title>
    <link rel="stylesheet" type="text/css" href="greeting_card.css"/>
</head>
<body>
<div class="container">
    <div class="music" id="mu">
        <img src="img/music_disc.png" id="mu-disc" class="disc"/>
        <img src="img/music_pointer.png" alt=""/>
    </div>
    <div class=" " id="page1">
        <img src="img/p1_lantern.png" class="lantern"/>
        <p class="click">点击屏幕 <br/>开启好运2016</p>
        <img src="img/p1_imooc.png" class="imooc"/>
        <p class="info">2016年慕课网新年特献</p>
    </div>
    <div class="" id="page2">
        <div class="white"></div>
        <img src="img/p2_2016.png" class="" />
        <div class="circle_outer"></div>
    </div>
    <div class="" id="page3">
        <img src="img/p3_logo.png" class="logo"/>
        <img src="img/p3_couplet_first.png" class="couplet-rt"/>
        <img src="img/p3_couplet_second.png" class="couplet-lt"/>
        <img src="img/p3_title.png" class="title"/>
        <img src="img/p3_blessing.png" class="bless"/>
    </div>
    <audio autoplay="autoplay" id="audio">
        <source src="img/Love Paradise.mp3" type="audio/mpeg">
    </audio>
</div>
<script>
   window.onload=function(){
        var audio = document.getElementById("audio");
        var muDisc = document.getElementById("mu-disc");
        audio.addEventListener("ended", function (event) {
            muDisc.setAttribute("class", "");
        }, false);
        muDisc.addEventListener("touchstart", function (event) {
            if (audio.paused === true) {
                audio.play();
                this.setAttribute("class", "disc");
            } else {
                audio.pause();
                this.setAttribute("class", "");
            }
        }, false);
        var page1 = document.getElementById("page1");
        var page2 = document.getElementById("page2");
        var page3 = document.getElementById("page3");
        page1.addEventListener("touchstart", function () {
            this.style.display = "none";
            page2.style.display = "block";

            setTimeout(function () {
                page2.setAttribute("class", "page2");
                page3.style.display = "block";
                page3.setAttribute("class", "page3");
            }, 5000)
        }, false)

    }


</script>
</body>
</html>